<template>
	<view class="sign-in-container">
		<view class="header">
			<text class="title">定位签到签退</text>
			<image class="avatar" :src="userInfo.avatar"></image>
		</view>
		<view class="location">
			<map style="width: 100%;height: 80%;" :latitude="latitude" :longitude="longitude" :show-location="true"
				:markers="markers" :circles="circles" />
			<!-- <image class="location-icon" src="/static/location.png"></image>
			<view class="location-text">{{location}}</view>
			<view class="status">{{status}}</view> -->
			<view class="location-address">
				当前位置：{{location}}
			</view>
		</view>
		<button class="btn" @click="handleSignBtnClick">{{signBtnText}}</button>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import {
		getDetailAddress,
		clockRecords,
		addRecords,
		clockOut
	} from "../../../ajax/api/clock.js"
	export default {
		data() {
			return {
				markers: [], // 地图标记
				location: "定位中...", //当前位置
				latitude: null, //纬度
				longitude: null, //经度
				signBtnText: '签到', // 签到/签退按钮显示文案
				id: "", //招募id
				qiyeLat: "", //企业纬度
				qiyeLon: "", //企业经度
				radius: 150, //签到半径
				circles: [], //签到圈
				records: [], //签到记录
				distance: "", //距离
			}
		},
		computed: {
			...mapState(["userInfo"])
		},
		async onShow() {
			// 获取打卡记录
			const res = await clockRecords({
				recruitmentInfo: this.$Route.query.id,
				user: this.userInfo._id,
			})
			this.records = res.rows;
			if (this.records.length === 0) {
				this.signBtnText = "签到"
			} else {
				const len = this.records.length;
				if (this.records[len - 1].createdAt === this.records[len - 1].updatedAt) {
					this.signBtnText = "签退"
				} else {
					this.signBtnText = "签到"
				}
			}
			// 获取企业位置的经纬度
			this.qiyeLat = this.$Route.query.latitude;
			this.qiyeLon = this.$Route.query.longitude;
			this.circles = [{
				longitude: this.qiyeLon,
				latitude: this.qiyeLat,
				fillColor: "#FF2B431A",
				color: "#FF0000",
				radius: this.radius,
				strokeWidth: 1
			}]
			// 获取当前位置信息
			uni.getLocation({
				type: 'gcj02',
				success: (res) => {
					this.latitude = res.latitude;
					this.longitude = res.longitude;
					// 经纬度转码详细地址
					uni.request({
						url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${this.latitude},${this.longitude}`,
						data: {
							key: 'REPBZ-M46C3-3IM3Z-OEBQF-2DYSS-ZFFY3', // 必填
						},
						success: ({
							data
						}) => {
							this.location = data.result.address;
						}
					})
					this.markers = [{
						id: 0,
						title: "map",
						latitude: res.latitude,
						longitude: res.longitude,
						width: 50,
						height: 50,
						iconPath: "/static/position.png",
						label: {
							content: '当前位置',
							color: '#ffffff',
							bgColor: '#f76a24',
							padding: 6,
							borderWidth: 1,
							borderColor: '#f76a24'
						}
					}]
				},
				fail: (err) => {
					console.log('getLocation err: ', err)
				}
			})
		},
		methods: {
			// 获取当前位置距离签到点的距离
			getDistance() {
				let red1 = this.latitude * Math.PI / 180.0;
				let red2 = this.qiyeLat * Math.PI / 180.0;
				let a = red1 - red2;
				let b = this.longitude * Math.PI / 180.0 - this.qiyeLon * Math.PI / 180.0;
				let R = 6378137;
				let distance = R * 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(red1) * Math.cos(red2) *
					Math.pow(Math.sin(b / 2), 2)));
				return distance.toFixed(2) * 1;
			},
			handleSignBtnClick() {
				this.distance = this.getDistance();
				if (this.distance <= this.radius) {
					// 签到签退操作
					if (this.signBtnText === "签到") {
						// 进行签到操作
						uni.showModal({
							content: '确认签到吗？',
							success: async (res) => {
								if (res.confirm) {
									const res = await addRecords({
										recruitmentInfo: this.$Route.query.id,
									})
									this.signBtnText = '签退';
									uni.showToast({
										title: '签到成功',
										icon: 'success',
									})
									setTimeout(() => {
										uni.navigateBack();
									}, 500)
								}
							}
						})
					} else {
						// 签退操作
						uni.showModal({
							content: '确认签退吗？',
							success: async (res) => {
								if (res.confirm) {
									const len = this.records.length;
									const res = await clockOut(this.records[len - 1]._id, {
										recruitmentInfo: this.$Route.query.id,
									})
									this.signBtnText = '签到'
									uni.showToast({
										title: '签退成功',
										icon: 'success',
									})
									setTimeout(() => {
										uni.navigateBack();
									}, 500)
								}
							}
						})
					}
				} else {
					uni.showToast({
						title: '签到失败，当前未在签到范围内，请稍后重试',
						icon: 'none',
						duration: 2500
					});
				}
			}
		},
	}
</script>

<style scoped lang="scss">
	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 88rpx;
		padding: 0 32rpx;
		background-color: #ffffff;
		box-shadow: 0 2rpx 2rpx rgba(0, 0, 0, 0.1);

		.title {
			font-size: 34rpx;
			font-weight: bold;
		}

		.avatar {
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
		}
	}

	.location {
		width: 100%;
		height: 600rpx;

		.location-address {
			width: 100%;
			text-align: center;
			padding: 40rpx 0;
		}

		/* display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		height: 240rpx;
		margin-top: 64rpx;
		background-color: #ffffff;
		box-shadow: 0 2rpx 2rpx rgba(0, 0, 0, 0.1); */
	}

	.btn {
		margin: 20rpx;
		margin-top: 80rpx;
		background: $base-color;
		color: #fff;
	}


	.location-icon {
		width: 72rpx;
		height: 72rpx;
		margin-bottom: 32rpx;
	}

	.location-text {
		font-size: 28rpx;
		color: #999999;
	}

	.status {
		margin-top: 16rpx;
		padding: 12rpx 24rpx;
		font-size: 24rpx;
		color: #ffffff;
		background-color: #999999;
		border-radius: 20rpx;
	}

	.button-group {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 64rpx;
	}

	.active {
		background-color: #ff9900;
	}
</style>
